<template>
    <LoadPage :show="show" />
    <view class="main">
        <view class="box" v-if="JSON.stringify(orderDetail) != '{}'">
            <view class="title">{{ orderDetail.addrName }}</view>
            <view class="list">
                <view class="item dispaly-center">
                    <view class="cover">
                        <image :src="orderDetail.image.split(',')[0]" mode="aspectFill" />
                    </view>
                    <view class="right">
                        <view class="one dispaly-just-between">
                            <view class="name">{{ orderDetail.serviceName }}</view>
                            <view class="price">¥{{ orderDetail.money }}</view>
                        </view>
                        <view class="two">{{ orderDetail.specName }}</view>
                        <view class="three">×{{ orderDetail.num }}</view>
                    </view>
                </view>
            </view>
            <!-- <view class="tip dispaly-just-between">
                <view class="t-left dispaly-center">
                    <view class="y dispaly-align-center">运</view>
                    <view class="y-text">运送费</view>
                </view>
                <view class="t-right">¥{{ orderDetail.totalMoney.toFixed(2) }}</view>
            </view> -->
            <view class="total">
                <view class="t">小计¥</view>
                <view class="t-price">{{ orderDetail.totalMoney.toFixed(2) }}</view>
            </view>
        </view>
    </view>
    <view class="option">
        <view class="box dispaly-center">
            <view class="total">
                <view class="t">合计¥</view>
                <view class="t-price">{{ orderDetail.totalMoney.toFixed(2) }}</view>
            </view>
            <view class="pay dispaly-align-center" @click="payment">
                支付
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { debounce } from '@/utils/util'
import { createOrder, pay } from '@/api/apiList'

const data = ref({})
onLoad((option) => {
    data.value = JSON.parse(decodeURIComponent(option.data))
    oerder()
})

// 下单
let show = ref(true)
let orderDetail = ref({})
const oerder = async () => {
    const res = await createOrder(data.value)
    if (res.code == 200) {
        orderDetail.value = res.data
        console.log(res, 'res')
        show.value = false
    }
}


// 支付
const payment = debounce(async () => {
    uni.showLoading({
        title: '加载中',
    })
    const res = await pay(orderDetail.value.id)
    if (res.code == 200) {
        const { appId, nonceStr, packageVal, paySign, signType, timeStamp } = res.data
        uni.requestPayment({
            provider: 'wxpay',
            timeStamp,
            nonceStr,
            package: packageVal,
            signType,
            paySign,
            success: (res) => {
                if (res.errMsg == 'requestPayment:ok') {
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none'
                    })
                    uni.hideLoading()
                    setTimeout(() => {
                        uni.reLaunch({
                            url: `/subPackage/mine/myOrder?status=1`
                        })
                    }, 1500)
                }
            },
            fail: (err) => {
                uni.hideLoading()
                uni.showToast({
                    title: '您取消了支付',
                    icon: 'none'
                })
            }
        })
        uni.hideLoading()
        console.log(res, 'reeeeeeee')
        show.value = false
    }
}, 1500, true)

</script>
<style lang="scss" scoped>
.option {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 166rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: flex-end;
    padding: 10rpx 0;

    .box {
        .total {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 29rpx;

            .t {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #111111;
                margin-right: 10rpx;
            }

            .t-price {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 800;
                font-size: 48rpx;
                color: #111111;
            }
        }

        .pay {
            width: 220rpx;
            height: 80rpx;
            background: #FB4E47;
            border-radius: 40rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 36rpx;
            color: #FFFFFF;
            margin-right: 20rpx;
        }
    }
}

.main {
    padding: 30rpx;


    .box {
        background: #FFFFFF;
        border-radius: 12rpx;
        padding: 35rpx 23rpx;

        .total {
            display: flex;
            justify-content: flex-end;
            margin-top: 30rpx;

            .t {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #111111;
                display: flex;
                align-items: flex-end;
                margin-right: 10rpx;
            }

            .t-price {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 800;
                font-size: 48rpx;
                color: #111111;
            }
        }

        .title {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #111111;
            margin-bottom: 40rpx;
        }

        .tip {
            margin-top: 83rpx;
            padding-bottom: 63rpx;
            border-bottom: 1rpx solid #eee;

            .t-left {
                .y {
                    width: 32rpx;
                    height: 32rpx;
                    background: #FB4E47;
                    border-radius: 4rpx;
                    margin-right: 10rpx;
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }

                .y-text {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #111111;
                }
            }

            .t-right {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 800;
                font-size: 30rpx;
                color: #111111;
            }
        }

        .list {
            .item:last-child {
                margin-bottom: 0;
            }

            .item {
                margin-bottom: 60rpx;

                .cover {
                    margin-right: 17rpx;

                    image {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 8rpx;
                    }
                }

                .right {
                    width: 100%;

                    .one {
                        .name {
                            font-family: PingFang-SC, PingFang-SC;
                            font-weight: bold;
                            font-size: 24rpx;
                            color: #111111;
                        }

                        .price {
                            font-family: PingFang-SC, PingFang-SC;
                            font-weight: 800;
                            font-size: 30rpx;
                            color: #111111;
                        }
                    }

                    .two,
                    .three {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #999999;
                    }

                }
            }
        }
    }
}
</style>